<template>
    <el-container>
        <VueDragResize :isActiyve="true" :w="dialogWidth" :h="750" v-on:resizing="resize" v-on:dragging="resize"
            :isResizable="false" :parentLimitation="false" :parentW="w" :parentH="h" :x="screenWidth" :y="170"
            :preventActiveBehavior="false" style="background-color: rgba(255, 255, 255, 0.8);z-index:3;overflow: hidden;">
            <div class="diagnostic-box">
                <div class="diagnostic-title">
                    <div>诊断依据(临床信息AI分析)</div>
                    <div v-show="!!suspicious" class="position-suspicious">
                        <span class="position-suspicious-sub position-suspicious-text">{{
                            suspiciousEnumByLabel.label
                        }}:</span>
                        <span class="suspicious-round position-suspicious-sub"
                            :style="{ background: suspiciousEnumByLabel.color }"></span>
                    </div>
                </div>
                <el-row>
                    <el-col :span="20">
                        <span style="margin-left:16px;font-size:14px">选择分析源:</span>
                        <el-select v-model="analysisSource" placeholder="请选择分析源" size="mini" @change="getNLPDiagnosis">
                            <el-option v-for="item in allElectronicMedicalDataArry" :key="item.id" :label="item.date"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>

                    <el-col :span="4">
                        <el-button size="mini" type="primary" @click="getNlpSumarization">汇总</el-button>
                    </el-col>
                </el-row>
                <!-- <div class="content-main">
                    <el-row>
                        <el-col :span="8">
                            <el-tag
                                class="tag-min-width"
                                effect="plain"
                                type="info"
                            >
                                姓名:{{ diagnosticBasisData.name }}
                            </el-tag>
                        </el-col>
                        <el-col :span="8">
                            <el-tag
                                class="tag-min-width"
                                effect="plain"
                                type="info"
                            >
                                1.性别:{{ diagnosticBasisData.sex }}
                            </el-tag>
                        </el-col>
                        <el-col :span="8">
                            <el-tag
                                class="tag-min-width"
                                effect="plain"
                                type="info"
                            >
                                2.年龄:{{ diagnosticBasisData.age }}
                            </el-tag>
                        </el-col>
                        <el-col :span="8">
                            <el-tag
                                class="tag-min-width"
                                effect="plain"
                                type="info"
                            >
                                3.身高:{{ diagnosticBasisData.height }}CM
                            </el-tag>
                        </el-col>
                        <el-col :span="8">
                            <el-tag
                                class="tag-min-width"
                                effect="plain"
                                type="info"
                            >
                                4.体重:{{ diagnosticBasisData.weight }}KG
                            </el-tag>
                        </el-col>
                        <el-col :span="8">
                            <el-tag
                                class="tag-min-width"
                                effect="plain"
                                type="info"
                            >
                                BMI:{{ bmi }}
                            </el-tag>
                        </el-col>
                    </el-row>
                </div> -->
                <div class="content-main">
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="阳性特征" name="positiveFeatures">
                            <span slot="label">
                                阳性特征
                                <el-badge v-if="positiveFeaturesList.length > 0" :value="positiveFeaturesList.length"
                                    class="tab-content-badge"></el-badge>
                            </span>
                            <div v-if="positiveFeaturesList.length > 0">
                                <el-row v-for="item in positiveFeaturesList" :key="item.id">
                                    <el-tag :type="item.value === 1 ? 'danger' : item.value === 2 ? 'success' : 'info'">
                                        <span class="fix-width" :title="item.id + item.text">{{ item.id }}.{{ item.text }}:
                                        </span>
                                        <!-- <el-radio-group :value="item.value.toString()">
                                        <el-radio
                                            fill="success"
                                            label="1"
                                        >是</el-radio>
                                        <el-radio
                                            fill="danger"
                                            label="2"
                                        >否</el-radio>
                                        <el-radio label="3">未描述</el-radio>
                                    </el-radio-group> -->
                                    </el-tag>
                                </el-row>
                            </div>
                            <div v-else style="font-size:12px">
                                暂无数据
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="阴性特征" name="negativeFeatures">
                            <span slot="label">
                                阴性特征
                                <el-badge v-if="negativeFeaturesList.length > 0" :value="negativeFeaturesList.length"
                                    class="tab-content-badge"></el-badge>
                            </span>
                            <div v-if="negativeFeaturesList.length > 0">
                                <el-row v-for="item in negativeFeaturesList" :key="item.id">
                                    <el-tag :type="item.value === 1 ? 'danger' : item.value === 2 ? 'success' : 'info'">
                                        <span class="fix-width" :title="item.id + item.text">{{ item.id }}.{{ item.text }}:
                                        </span>
                                        <!-- <el-radio-group :value="item.value.toString()">
                                        <el-radio
                                            fill="success"
                                            label="1"
                                        >是</el-radio>
                                        <el-radio
                                            fill="danger"
                                            label="2"
                                        >否</el-radio>
                                        <el-radio label="3">未描述</el-radio>
                                    </el-radio-group> -->
                                    </el-tag>
                                </el-row>
                            </div>
                            <div v-else style="font-size:12px">
                                暂无数据
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="异常检验" name="anomalyCheck">
                            <span slot="label">
                                异常检验
                                <el-badge v-if="diagnosticBasisData.tableData.length > 0"
                                    :value="diagnosticBasisData.tableData.length" class="tab-content-badge"></el-badge>
                            </span>
                            <el-table :data="diagnosticBasisData.tableData" border style="width: 100%">
                                <el-table-column align="center" v-for="item in header" :prop="item.code" :label="item.label"
                                    :key="item.label">
                                    <template slot-scope="scope">
                                        <span v-if="item.label == '高低标志'" :class="[
                                            scope.row.ycts == 'H' || scope.row.ycts == 'L' ? 'redColor' : '',
                                        ]">
                                            {{ scope.row.ycts }}
                                        </span>
                                        <span v-else>{{ scope.row[item.code] }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="content-main">
                    <div class="sub-title">最新一份胃镜报告检查所见:</div>
                    <el-input type="textarea" :rows="7" v-model="diagnosticBasisData.reportPatientInspectionSeen" />
                </div>
                <div class="content-main">
                    <div class="sub-title">最近本院胃镜检查结论:</div>
                    <el-input type="textarea" :rows="3" v-model="diagnosticBasisData.gastroscopyElectronicReport" />
                </div>
                <div class="content-main">
                    <div class="sub-title">病史和相关检查的阳性描述:</div>
                    <el-input type="textarea" :rows="3" v-model="diagnosticBasisData.positiveDescription" />
                </div>

            </div>
        </VueDragResize>
    </el-container>
</template>

<script>
import VueDragResize from 'vue-drag-resize';
import {
    otherInfo,
    riskFactors,
    mainSymptom,
    mainSigns,
    withAbuseSyndrome,
    historyOfDescription,
} from '@/client/consts/medicalLabels';
import { suspiciousStatus, Enum } from '@/client/consts/enum';

export default {
    name: 'ViewerDiagnosticBasis', // 诊断依据
    components: {
        VueDragResize,
    },
    props: {},
    data() {
        return {
            dialogWidth: 415,
            screenWidth: '',
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight - 50,
            activeName: 'positiveFeatures',
            positiveFeaturesList: [],
            negativeFeaturesList: [],
            allElectronicMedicalDataArry: [],
            analysisSource: '',
            riskFactors: riskFactors,
            mainSymptom: mainSymptom,
            mainSigns: mainSigns,
            withAbuseSyndrome: withAbuseSyndrome,
            historyOfDescription: historyOfDescription,
            diagnosticInfo: {
                ...riskFactors,
                ...mainSymptom,
                ...mainSigns,
                ...withAbuseSyndrome,
                ...historyOfDescription,
            },
            header: [
                {
                    code: 'eventName',
                    label: '检验项目',
                },
                {
                    code: 'consequence',
                    label: '检验结果',
                },
                {
                    code: 'consequenceTime',
                    label: '报告时间',
                },
                {
                    code: 'ycts',
                    label: '异常提示代码',
                },
            ],
            diagnosticBasisData: {
                data: null,
                gastroscopyElectronicReport: '',
                positiveDescription: '',
                reportPatientInspectionSeen: '',
                tableData: [],
                name: '',
                sex: '',
                age: '',
                height: '',
                weight: '',
            },
            suspicious: '高风险',
            bmi: '',
            biopsyListCopyToCalc: [],
            responseScore: '',
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            this.getElectronicMedical();
            this.screenWidth =
                document.body.clientWidth - this.dialogWidth - 50;
            window.onresize = () => {
                return (() => {
                    this.screenWidth =
                        document.body.clientWidth - this.dialogWidth - 50;
                })();
            };
            await this.getNlpScore();
            await this.getBiopsy();
        },

        getBiopsy() {
            const pDiagnosisType = sessionStorage.getItem('pDiagnosisType');
            // let pathologyId = this.urlPathologyId;
            let pathologyId = '';

            // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
            if (this.$route.query.pDiagnosisType) {
                pathologyId = sessionStorage.getItem('pathologyId');
            } else {
                pathologyId = this.$route.query.pathologyId;
            }
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/diagnosis/single',
                params: {
                    pathologyId: pathologyId,
                    pDiagnosisType: pDiagnosisType,
                },
            }).then((res) => {
                // 请求成功
                const result = res.data.data;
                this.biopsyListCopyToCalc = result.biopsyList;
                this.calcScoreColor();
            });
        },
        calcScoreColor() {
            let sliceAi = this.calcSliceAi();
            let nlpAi = '';
            if (this.responseScore == null) {
                nlpAi = 'grey';
            } else if (this.responseScore >= 100) {
                nlpAi = 'red';
            } else if (this.responseScore < 100 && this.responseScore >= 0) {
                nlpAi = 'green';
            }
            let finialScoreArr = [sliceAi, nlpAi];
            let isShowViewerDiagnosticBasis = true;
            if (nlpAi == 'grey') {
                isShowViewerDiagnosticBasis = false;
            }
            const finialScore = this.calcFinialScore(finialScoreArr);

            this.$emit(
                'calcTotleScore',
                finialScore,
                isShowViewerDiagnosticBasis
            );
        },
        calcSliceAi() {
            if (
                this.biopsyListCopyToCalc.some((obj) => {
                    return obj.isAi == '2';
                })
            ) {
                return 'red';
            } else if (
                this.biopsyListCopyToCalc.some((obj) => {
                    return obj.isAi == '1';
                })
            ) {
                return 'green';
            } else {
                return 'grey';
            }
        },
        calcFinialScore(finialScoreArr) {
            if (
                finialScoreArr.some((obj) => {
                    return obj == 'red';
                })
            ) {
                return 'red';
            } else if (
                finialScoreArr.some((obj) => {
                    return obj == 'green';
                })
            ) {
                return 'green';
            } else {
                return 'grey';
            }
        },
        getNlpScore() {
            // let pathologyId = this.urlPathologyId;
            let pathologyId = '';

            // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
            if (this.$route.query.pDiagnosisType) {
                pathologyId = sessionStorage.getItem('pathologyId');
            } else {
                pathologyId = this.$route.query.pathologyId;
            }
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/diagnosticBasis/getCheckScore/${pathologyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.responseScore = res.data.data;
                    const score = res.data.data;
                    if (score == null) {
                        this.suspicious = '未分析';
                    } else if (score >= 100) {
                        this.suspicious = '高风险';
                    } else if (score < 100 && score >= 0) {
                        this.suspicious = '低风险';
                    }
                }
            });
        },
        getElectronicMedical() {
            // let pathologyId = this.urlPathologyId;
            let pathologyId = '';

            // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
            if (this.$route.query.pDiagnosisType) {
                pathologyId = sessionStorage.getItem('pathologyId');
            } else {
                pathologyId = this.$route.query.pathologyId;
            }

            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/outpatientWithHospital/getTypeAndDate/by/${pathologyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.analysisSource = '';
                    this.allElectronicMedicalDataArry = [];
                    this.diagnosticBasisData = {
                        data: null,
                        gastroscopyElectronicReport: '',
                        positiveDescription: '',
                        reportPatientInspectionSeen: '',
                        tableData: [],
                        name: '',
                        sex: '',
                        age: '',
                        height: '',
                        weight: '',
                    };
                    this.bmi = '';
                    this.diagnosticBasisData.tableData = [];
                    this.positiveFeaturesList = [];
                    this.negativeFeaturesList = [];
                    // this.$emit(
                    //     'isShowViewerDiagnosticSasis',
                    //     res.data.data.length
                    // ); //张老师特殊要求 如果有数据就显示在切片浏览器的诊断依据框(默认是显示的),没有分析源就不显示
                    res.data.data.forEach((item) => {
                        this.allElectronicMedicalDataArry.push(item);
                    });

                    if (this.allElectronicMedicalDataArry.length > 0) {
                        this.analysisSource =
                            this.allElectronicMedicalDataArry[0].id;
                        this.getNLPDiagnosis(
                            this.allElectronicMedicalDataArry[0].id
                        );
                    }
                }
            });
        },

        getNLPDiagnosis(pId) {
            // let pathologyId = this.urlPathologyId;
            let pathologyId = '';

            // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
            if (this.$route.query.pDiagnosisType) {
                pathologyId = sessionStorage.getItem('pathologyId');
            } else {
                pathologyId = this.$route.query.pathologyId;
            }
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/diagnosticBasis/get/diagnosticBasis/by/${pathologyId}/${pId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    let labelData = {};
                    Object.keys(this.diagnosticBasisData).forEach((item) => {
                        if (item !== 'showStatus') {
                            this.diagnosticBasisData[item] =
                                res.data.diagnosticBasis[item];
                        }
                    });
                    Object.keys(res.data.diagnosticBasis).forEach((item) => {
                        const labelItem = item.split('label');
                        if (labelItem.length === 2) {
                            labelData[labelItem[1]] = parseInt(
                                res.data.diagnosticBasis[item]
                            );
                        }
                    });
                    this.diagnosticBasisData.data = labelData;
                    this.bmi =
                        Number(
                            (this.diagnosticBasisData.weight /
                                this.diagnosticBasisData.height /
                                this.diagnosticBasisData.height) *
                            10000
                        ) || '';
                    this.diagnosticBasisData.gastroscopyElectronicReport =
                        res.data.gastroscopyElectronicReport;
                    this.diagnosticBasisData.positiveDescription = '';
                    Object.keys(res.data.positiveDescription).forEach(
                        (item) => {
                            let text = item + ':';
                            if (res.data.positiveDescription[item].length > 0) {
                                res.data.positiveDescription[item].forEach(
                                    (it) => {
                                        text += it + ';';
                                    }
                                );
                                this.diagnosticBasisData.positiveDescription +=
                                    text;
                            }
                        }
                    );
                    this.diagnosticBasisData.reportPatientInspectionSeen =
                        res.data.reportPatientInspectionSeen;
                    this.diagnosticBasisData.tableData =
                        res.data.inspectionInformation;

                    this.assemblyParameters(this.diagnosticBasisData.data);
                }
            });
        },
        getNlpSumarization() {
            this.analysisSource = '';
            // let pathologyId = this.urlPathologyId;
            let pathologyId = '';

            // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
            if (this.$route.query.pDiagnosisType) {
                pathologyId = sessionStorage.getItem('pathologyId');
            } else {
                pathologyId = this.$route.query.pathologyId;
            }
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/diagnosticBasis/get/diagnosticBasis/by/${pathologyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    let labelData = {};
                    Object.keys(this.diagnosticBasisData).forEach((item) => {
                        if (item !== 'showStatus') {
                            this.diagnosticBasisData[item] =
                                res.data.diagnosticBasis[item];
                        }
                    });
                    Object.keys(res.data.diagnosticBasis).forEach((item) => {
                        const labelItem = item.split('label');
                        if (labelItem.length === 2) {
                            labelData[labelItem[1]] = parseInt(
                                res.data.diagnosticBasis[item]
                            );
                        }
                    });
                    this.diagnosticBasisData.data = labelData;
                    this.bmi =
                        Number(
                            (this.diagnosticBasisData.weight /
                                this.diagnosticBasisData.height /
                                this.diagnosticBasisData.height) *
                            10000
                        ) || '';
                    this.diagnosticBasisData.gastroscopyElectronicReport =
                        res.data.gastroscopyElectronicReport;
                    this.diagnosticBasisData.positiveDescription = '';
                    res.data.positiveDescription.forEach((outItem) => {
                        Object.keys(outItem).forEach((item) => {
                            let text = item + ':';
                            if (outItem[item].length > 0 && item != '时间') {
                                outItem[item].forEach((it) => {
                                    text += it + ',';
                                });
                                this.diagnosticBasisData.positiveDescription +=
                                    text;
                            }
                            if (item === '时间') {
                                this.diagnosticBasisData.positiveDescription +=
                                    outItem['时间'];
                            }
                        });
                    });

                    this.diagnosticBasisData.tableData =
                        res.data.inspectionInformation;
                    this.assemblyParameters(this.diagnosticBasisData.data);
                }
            });
        },
        // 参数转换,
        assemblyParameters(args) {
            Object.keys(this.diagnosticInfo).forEach((item) => {
                const optionCheck = args[item.toString()];
                switch (this.diagnosticInfo[item].title) {
                    case 'riskFactors':
                        riskFactors[item].value = optionCheck;
                        break;
                    case 'mainSymptom':
                        mainSymptom[item].value = optionCheck;
                        break;
                    case 'mainSigns':
                        mainSigns[item].value = optionCheck;
                        break;
                    case 'withAbuseSyndrome':
                        withAbuseSyndrome[item].value = optionCheck;
                        break;
                    case 'historyOfDescription':
                        historyOfDescription[item].value = optionCheck;
                }
            });
            this.getTabList();
        },
        getTabList() {
            this.positiveFeaturesList = [];
            this.negativeFeaturesList = [];
            Object.keys(this.diagnosticInfo).forEach((item) => {
                if (this.diagnosticInfo[item].value === 1) {
                    this.positiveFeaturesList.push(this.diagnosticInfo[item]);
                } else if (this.diagnosticInfo[item].value === 2) {
                    this.negativeFeaturesList.push(this.diagnosticInfo[item]);
                }
            });
        },

        resize(newRect) {
            this.width = newRect.width;
            this.height = newRect.height;
            this.top = newRect.top;
            this.left = newRect.left;
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
    },

    watch: {},
    computed: {
        suspiciousEnumByLabel() {
            return new Enum(suspiciousStatus).itemByLabel(this.suspicious);
        },
        suspiciousEnumByValue() {
            return new Enum(suspiciousStatus).itemByLabel(this.suspicious);
        },
        // urlPathologyId() {
        //     let pathologyId = '';
        //     
        //     // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
        //     if (this.$route.query.pDiagnosisType) {
        //         pathologyId = sessionStorage.getItem('pathologyId');
        //     } else {
        //         pathologyId = this.$route.query.pathologyId;
        //     }
        //     return pathologyId
        // }
    },
};
</script>

<style scoped>
.el-container {
    background-color: #f0f0f0;
}

.diagnostic-box {
    height: calc(700px - 10px);
    overflow-y: auto;
}

.content-main {
    padding: 8px;

    margin: 4px 12px;
}

.diagnostic-title {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.el-col,
.sub-title {
    margin-bottom: 12px;
    font-size: 14px;
}

.el-header,
.el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
}

.content-main>>>.el-table__header thead tr th {
    color: #909399;
}

.tag-min-width {
    min-width: 100px;
}

/* .position-suspicious {
    position: relative;
}

.position-suspicious-sub {
    position: absolute;
}

.position-suspicious-text {
    margin-top: 6px;
    width: 100px;
} */

.suspicious-round {
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

.fix-width {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

label.el-radio {
    margin-right: 10px;
}

.el-tag {
    width: 100%;
}

.redColor {
    color: red;
}
</style>
